import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, ActionSheetController, AlertController } from "ionic-angular";



@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  num: number = 0;
  items: any = [1, 2, 3, 4, 5];
  locus: number = 0;
  menuBarWidth: any;
  testRadioOpen: boolean;
  testRadioResult: any;
  @ViewChild('inp') input: ElementRef
  @ViewChild('menuBar') menuBar: ElementRef
  @ViewChild('men') men: ElementRef
  constructor(
    public navCtrl: NavController,
    public actionCtrl: ActionSheetController,
    public alertCtrl: AlertController
  ) {

  }
  ngOnInit() {

    console.log(this.men.nativeElement)
  }
  change(event: any) {


    this.num = event.target.value;
    this.input.nativeElement.style.backgroundSize = this.num + '%' + 100 + '%';
    console.log(this.num)
  }
  clineWi(e) {
    // this.menuBar.nativeElement.style.width = this.locus +'px';
    console.log(e.srcEvent.offsetX);
    

  }
  getHost(e) {
    console.log(e)
     console.log(e.srcEvent.offsetX);
    // console.log(e.center.x)

  }

  // Action弹框
  Action() {
    let Action = this.actionCtrl.create({
      title: '这是一个选择弹窗',
      buttons: [
        {
          text: 'Dis',
          role: 'destructive',
          handler: () => {
            console.log('Dis clicked')
          }
        },
        {
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
          }
        },
        {
          text: '取消',
          role: 'cancel',
          handler: () => {
            console.log('取消 clicked');
          }
        }
      ]
    })
    Action.present()
  }
  Alert() {
    let alert = this.alertCtrl.create({
      title: '警告',
      subTitle: '请求错误',
      buttons: ['OK']
    })
    alert.present()
  }

  // 输入弹框
  InputAlert() {
    let inputAlert = this.alertCtrl.create({
      title: '登录',
      message: '请输入你的账号和密码',
      inputs: [
        {
          name: 'name',
          placeholder: '账号',
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log(data)
          }
        },
        {
          text: 'Save',
          handler: data => {
            console.log(data.name)
          }
        }
      ]
    })
    inputAlert.present();
  }
  // 确定取消弹框
  showConfirm() {
    let confirm = this.alertCtrl.create({
      title: '删除',
      message: '您确定要删除吗',
      buttons: [
        {
          text: '取消',
          handler: () => {
            console.log('取消')
          }
        },
        {
          text: '确定',
          handler: () => {
            console.log('确定')
          }
        }
      ],
    })
    confirm.present();
  }

  showRadio() {
    let showRadio = this.alertCtrl.create();
    showRadio.setTitle('选择颜色');
    showRadio.addInput({
      type: 'radio',
      label: 'Blue',
      value: 'blue',
      checked: false
    });
    showRadio.addInput({
      type: 'radio',
      label: 'Green',
      value: 'green',
      checked: false
    });
    showRadio.addButton('取消');
    showRadio.addButton({
      text: '确定',
      handler: data => {
        this.testRadioOpen = false;
        this.testRadioResult = data;
        console.log(data)
      }
    })
    showRadio.present();
  }
}
